<template>
    <div class="login-box">
        <div class="login-content">
            <div class="mask"></div>
            <div class="content-box">
                <h3 class="ui-text-center"> 后台系统登录</h3>
                <el-form ref="form"
                         :model="form"
                         :rules="rules">
                    <el-form-item prop="name">
                        <el-input v-model="form.name"
                                  placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="pwb">
                        <el-input v-model="form.pwb"
                                  show-password
                                  placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="form.checked">记住密码</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   class="btn-block"
                                   :loading="btnLoad"
                                   @click="submitForm('form')">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import cookie from "js-cookie";
import store from "@/store";
export default {
    data() {
        return {
            imgBack: require("../../assets/img/pub/login.jpg"),
            btnLoad: false,

            form: {
                name: "",
                pwb: "",
                checked: ""
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    }
                ],
                pwb: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    mounted() {},
    methods: {
        submitForm(formName) {
            var that = this;
            //cookie 过期时间  30min
            var inHalfADay = new Date(new Date().getTime() + 30 * 60 * 1000);
            console.log(inHalfADay)
            that.btnLoad = true;
            that.$refs[formName].validate(valid => {
                if (valid) {
                    that.$ajax
                        .post("/login", {
                            name: that.form.name,
                            pwb: that.form.pwb
                        })
                        .then(function(res) {
                            if (res.code == "100") {
                                cookie.set("name", res.data.userName);
                                cookie.set("userImg", res.data.userImg);
                                cookie.set("loginState", 100, {
                                    expires: inHalfADay
                                });
                                cookie.set("userId", 0);
                                store.commit("setloginState", 100);
                                that.btnLoad = false;
                                that.$router.push({ path: "/" });
                            }
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped>
.login-box {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.login-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: transparent url("../../assets/img/pub/login.jpg") center center
        no-repeat;
    filter: blur(5px);
    z-index: -1;
    background-size: cover;
}

.login-content {
    width: 100%;
    position: relative;
    height: 300px;
    width: 300px;
    border-radius: 5px;
    overflow: hidden;
}

.mask {
    display: block;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    opacity: 0.7;
}
.content-box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
    padding: 0 20px;
}

.btn-block {
    width: 100%;
}
</style>